<template>
  <div id="app">
    <router-view v-if="isReload" />
    <div class="showtost" @click="showtost1" v-if="showbtn">
      <img
        src="../src/assets/images/waring.png"
        alt=""
        style="width:25px;height:25px"
      />
      <div>报警记录</div>
    </div>
    <div v-if="showpoup" class="waring-list">
      <ul class="waring-list_header">
        <li style="width: 120px;  text-align: center;">设备编号</li>
        <li style="width: 200px;  text-align: center;">设备位置</li>
        <li style="width: 180px;  text-align: center;">报警时间</li>
        <li style="width: 90px;  text-align: center;">报警原因</li>
        <li style="margin-right:5px;cursor: pointer;">
          <i class=" el-icon-minus" @click="handlerdel"></i>
        </li>
      </ul>

      <div v-if="listData.length == 0" class="nodata">
        暂无报警记录
      </div>
      <vue-seamless-scroll
        :data="listData"
        :class-option="classOption"
        class="seamless-warp"
        v-else
      >
        <ul class="item">
          <li
            v-for="item in listData"
            class="waring-list_header_content"
            @click="handlerwaring"
            style="cursor: pointer;"
          >
            <span
              class="title"
              style="width:160px"
              v-text="item.deviceNumber"
            ></span
            ><span class="date" style="width:140px">
              {{ item.location.substring(0, 9) }}
            </span>
            <span class="date" v-text="item.add_time"></span>
            <span
              class="date"
              v-text="item.content"
              v-if="item.offline == 1"
              style="color:#99CC33"
            ></span>
            <span
              class="date"
              v-text="item.content"
              v-else
              style="color:#FF6666"
            ></span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { getWarningListSimple } from "./utils/api";
export default {
  name: "App",
  provide() {
    // 父组件中通过provide来提供变量，在子组件中通过inject来注入变量
    return {
      reload: this.reload,
      handlergetWarningListSimple: this.handlergetWarningListSimple,
      showtost3: this.showtost3,
      showtost2: this.showtost2
    };
  },
  data() {
    return {
      isReload: true,
      showpoup: false,
      listData: [],
      showbtn: true
    };
  },

  components: {
    vueSeamlessScroll
  },
  computed: {
    classOption() {
      return {
        step: 0, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },

  methods: {
    reload() {
      this.isReload = false;

      this.$nextTick(() => {
        this.isReload = true;
      });
    },
    showtost1() {
      this.$nextTick(() => {
        this.showpoup = true;
      });
      this.handlergetWarningListSimple();
    },
    showtost2() {
      this.$nextTick(() => {
        this.showbtn = false;
        this.showpoup = false;
      });
    },
    showtost3() {
      this.showbtn = true;
    },
    handlerdel() {
      this.showpoup = false;
    },
    // 获取数据
    handlergetWarningListSimple() {
      this.postRequest(getWarningListSimple).then(res => {
        if (res.code == 200) {
          this.listData = res.data;
        }
      });
    },

    handlerwaring() {
      this.$router.push("/Police");
      this.showpoup = false;
    }
  }
};
</script>

<style>
/*自定义抽屉样式*/
.custom-drawer {
  overflow-y: auto !important;
}
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: -10px;
}
.el-cascader-panel .el-radio__input {
  　　visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  　　top: 10px;
}
.custom-drawer .el-drawer__body {
  position: relative !important;
}
.showtost {
  position: fixed;
  top: 42%;
  right: -65px;
  width: 94px;
  height: 42px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 15px;
  line-height: 30px;
  z-index: 10000;
  /* text-align: center; */
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  transition: 0.5s transform linear;
}
.showtost:hover {
  transform: translate(-67px, 0);
}
.showtost div {
  font-size: 14px;
}
.showtost_close {
  /* position: absolute;
  top: 0;
  right: 0; */
  font-size: 20px;
}
.seamless-warp {
  height: 400px;
  overflow: hidden;
}
.waring-list {
  position: fixed;
  top: 50%;
  right: 2%;
  z-index: 999999999;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px 5px 0 0;
  width: 640px;
  height: 450px;
}
.waring-list .waring-list_header {
  display: flex;
  flex-direction: row;
  line-height: 30px;
  justify-content: space-around;
  background-color: #3770ce;
  color: #fff;
  font-size: 14px;
  border-radius: 5px 5px 0 0;
}
.waring-list .waring-list_header_content {
  display: flex;
  flex-direction: row;
  line-height: 40px;
  justify-content: space-around;
  font-size: 14px;
}
.nodata {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 200px 0;
  color: #cccccc;
}
/* .waring-list .waring-list_header_content span {
  width: 170px;
} */
</style>
